<include file="/public/header" />
<!-- 重定位style -->
<div class="layui-fluid">
    <div class="layui-card">
        <!-- // 默认操作按钮 -->
        <div class="layui-card-header layadmin-card-header-auto ">
            <div class="layui-form">
                <div class="layui-inline" >
                    <!-- // 添加数据页面 -->
                    <button class="layui-btn icon-btn" lay-open="" lay-callback="edit" lay-title="{:__('添加导航')}" lay-area="600px" lay-url="#editforms" >
                        <i class="layui-icon layui-icon-add-1"></i>{:__('添加')}
                    </button>
                </div>
            </div>
        </div> 

        <!-- // 创建数据表实例 -->
        <table id="lay-tableList" lay-filter="lay-tableList"></table>        
    </div>
</div>

<!-- // 添加编辑数据 -->
<script type="text/html" id="editforms" >
<div class="layui-fluid layui-bg-white" >
    <form class="layui-form layui-form-fixed" lay-filter="editforms" >
    <input type="text" name="id" hidden="">
    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>{:__('上级导航')}</label>
        <div class="layui-input-block">
            <div id="pid"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>{:__('导航名称')}</label>
        <div class="layui-input-block">
            <input name="title" placeholder="{:__('导航名称')}" type="text" class="layui-input" lay-verify="required" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">{:__('导航地址')}</label>
        <div class="layui-input-block">
            <input name="url" placeholder="{:__('导航地址')}" type="text" class="layui-input"  lay-verify="required" />
        </div>
    </div>

    <div class="layui-footer layui-form-item layui-center "  >
        <button class="layui-btn layui-btn-primary" type="button" sa-event="closePageDialog" >{:__('取消')}</button>
        <button class="layui-btn" lay-add="{:url('/system.navmenu/add')}" lay-edit="{:url('/system.navmenu/edit')}" lay-filter="submitPage"  lay-submit>{:__('提交')}</button>
    </div>
    </form>
</div>
</script>

<!-- // 列表状态栏 -->
<script type="text/html" id="columnStatus">
    <input type="checkbox" lay-filter="switchStatus" lay-url="{:url('/system.navmenu/status')}" value="{{d.id}}" lay-skin="switch"
     {{d.status==1?'checked':''}}  />
</script>

<!-- // 列表工具栏 -->
<script type="text/html" id="tableBar"> 
    <a class="layui-table-text" lay-title="{:__('编辑')} {{d.title}}" lay-callback="edit" lay-area="600px" lay-url="#editforms" lay-event="edit" >{:__('编辑')}</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" lay-url="{:url('/system.navmenu/del')}?id={{d.id}}" lay-event="del" >{:__('删除')}</a>
</script>
<include file="/public/footer" />
<script src="__STATICADMIN__module/xmselect/xmselect.js"></script>
<script>
    layui.use(['admin','table','form'], function () {
        var jquery = layui.jquery;
        var table = layui.table;
        var admin = layui.admin;
        var form = layui.form;
        /*
         * 初始化表格
        */
        var isTable = table.render({
            elem: "#lay-tableList"
            ,url: "{:url('/system.navmenu/index')}"
            ,cols: [[
                {type: 'checkbox', width:45},
                {field: 'id', align: 'center',sort: true,width: 80,  title: 'ID'},
                {field: 'title', align: 'left',templet:function(d){
                    var left = d._level * 32;
                    var html = '<div style="padding-left:'+ left + 'px;">';
                        html += (d._level >= 1) ? '|-' + d.title : d.title;
                        html += ' </div>';
                    return html
                }, title: '{:__("名称")}'},
                {field: 'url', align: 'center',title: '{:__("地址")}'},
                {field: 'sort', align: 'center',width:80,  title: '{:__("排序")}'},
                {field: 'createtime', align: 'center', width:180,title: '{:__("创建时间")}'},
                {align: 'center', toolbar: '#tableBar', width:160, title: '{:__("操作")}'},
            ]]
        })

        // 编辑添加回调函数
        admin.callback.edit = function(clickthis,colletction,config) {
           // 获取表格对象
            var tableThis = colletction.tableThis,
                status = typeof(tableThis) === "undefined" ? true : false;
            // 渲染选择框
            var checkedId = [],data = JSON.parse('{$navmenu|raw}');
            if (typeof tableThis !== "undefined") {
                checkedId.push(tableThis.data.pid);
            }
            var select = xmSelect.render({
                el: '#pid',
                tips: '{:__("请选择上级导航")}',
                name: 'pid',
                height: 'auto',
                data: data,
                radio: true,
                clickClose: true,
                initValue: checkedId,
                prop: {
                    value: 'id',
                    name:'title'
                },
                tree: {
                    show: true,
                    strict: false,
                    showLine: false,
                    clickExpand: false,
                },
                model: { 
                    icon: 'hidden',
                    label: { 
                        type: 'text' 
                    } 
                },
                theme: {
                    color: '#1890FF'
                }
            })


            form.on("submit(submitPage)",function(post){

                // 获取用户id
                var pageThat = jquery(this),
                _pageUrl = !status ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
                 
                // 开始POST提交数据
                pageThat.attr("disabled",true);
                jquery.post(_pageUrl,
                    post.field, function(res){
                        if (res.code == 200) {
                            layer.msg(res.msg);
                            // 关闭当前窗口
                            table.reload('lay-tableList');
                            layer.close(colletction.index);
                        }else {
                            layer.msg(res.msg,'error');                             
                        }
                }, 'json');

                return false;
            })

        }

    })
</script>
